<template>
    <div class="jiaowu">
        <div class="jiaowu_tit">
            <h1>教务添加&gt;</h1>
        </div>
        <div class="jiaowu_main">
              <div class="loginname">
                        <el-form
                        :model="form"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        ref="myfrom"
                    >
                        <el-form-item label="账号" prop="account">
                        <el-input 
                        v-model="form.account" 
                        type="userword"
                        clearable
                        placeholder="请输入教务账号"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                        <el-form-item label="名字" prop="name">
                        <el-input 
                        v-model="form.name" 
                        type="text"
                        clearable
                        placeholder="请输入姓名"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                        
                         <el-form-item label="密码" prop="paw">
                            <el-input
                                v-model="form.paw"
                                type="password"
                                clearable
                                placeholder="请输入密码"
                                :prefix-icon="Lock"
                                show-password
                                @blur="checkdbpassword"
                            />
                            </el-form-item>
                        <el-form-item label="确认密码" prop="dbpassword">
                        <el-input
                            v-model="form.dbpassword"
                            type="password"
                            clearable
                            placeholder="请再次输入密码"
                            :prefix-icon="Lock"
                            show-password
                        
                        />
                        </el-form-item>
                        <el-form-item label="教研部" prop="dep">
                       <div class="radio">
                            <el-radio-group 
                            fill="#ff6700"
                            @change="mustRedio"
                            v-model="radio1" size="small">
                            <el-radio-button  label="语文教研部" />
                            <el-radio-button label="数学教研部" />
                            <el-radio-button label="外语教研部" />
                            </el-radio-group>
                       </div>
                        </el-form-item>
                       <el-form-item>
                            <div class="btnlogin">
                                <el-button block type="success" class="btn1" @click="submitFrom">添加</el-button>
                                <el-button block type="warning" class="btn1 btn2" @click="resetform">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
        </div>
    </div>
</template>
<script>
import {reactive,toRefs,ref} from "vue"
import {Lock,User} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
//消息提示
import { ElMessage } from 'element-plus'
//路由跳转
import {useRouter} from 'vue-router'
//ajax
import {ajax} from '@/api'
export default {
   setup(props) {
        const myfrom=ref()
        const radio1 = ref()
        const router= useRouter()
          //重置操作
        const resetform=()=>{
            //resetFields   重置当前字段并删除验证结果。 
            myfrom.value.resetFields()
        }

        //判断两次密码不同
        const checkDbpass=(rule,value,callback)=>{
            if(state.form.paw!=value){
                callback(new Error("两次密码不一致"))
            }else{
            callback()
            }
        }
        const checkdbpassword=()=>{
            if(reg.pwd.test(state.form.paw)&&reg.pwd.test(state.form.dbpassword)){
            myfrom.value.validateField('dbpassword')
            }
        }

        //选中值
        const mustRedio=(value)=>{
            console.log(value);
            state.form.dep=value
            state.flag=true
        }

        //提交祖册  
        const submitFrom=()=>{
          //选这教研部之后才能提交表单信息
         if(state.flag){
             myfrom.value.validate(async(valid)=>{
          if(valid){
                console.log(state.form);
                let res=await ajax.addJaowu(state.form)
                if(res.code==200){
                    console.log("添加成功");
                }


          }else{
            ElMessage.error("请输入正确的注册信息")
          }
          
          })
         }else{
             ElMessage.error("请选择教研部")
         }
        }
       const state=reactive({
        src:"https://gd-filems.dancf.com/saas/cms/0/a1b9aec9-593b-4e89-b2f0-361f85d755e823787.mp4",
        form:{
           dep:null
        },
        flag:false,
        word:{},
        flag:false,
            User,
            Lock,
            rules:{
                account:[
                    {
                        required:true,message:'账号必填'
                    },
                     {
                        pattern:/^\d{6}$/,message:'账号6位数字'
                    },
                ],
                name:[
                     {
                        required:true,message:'名字必填'
                    },
                ],
                paw:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                   
                ], dbpassword:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                      validator:checkDbpass,trigger:"blur",message:'两次密码不一样'
                    }
                ],
            },
       })

       
       return{
           ...toRefs(state),
             myfrom,
             resetform,
             checkdbpassword,
             submitFrom,
             radio1,
             mustRedio
             
       }
       
   }
}
</script>
<style lang="scss" scoped>
.jiaowu{
    width: 100%;
    height: 100%;
    position: relative;
    .jiaowu_tit{
        h1{
            font-size: 20px;
            font-weight: bold;

        }
    }
    .jiaowu_main{
        position: absolute;
        padding: 10px;
        width: 400px;
        height: 400px;
        border: 1px solid black;
        left: 0;
        margin: auto;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: 10px;
        .loginname{
            margin-top: 50px;
                .el-form-item__label{
                    color: #333;
                }
                .form_router{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    a{
                        color: #ff6700;
                        font-size: 14px;
                        // text-decoration: none;
                    }
                }
        .btnlogin{
              width: 100%;
            .btn1{
                margin-bottom: 10px;
                width: 100%;
              }
              .btn2{
                margin-left: 0px;
              }
            }
            .radio{
                width: 100%;
                .el-radio-group {
                    display: flex;
                    justify-content: space-between;
                 
                }
                
               
            }
            }

    }
   
}
</style>